<template>
  <view class="mx-24rpx pt-24rpx">
    <view class="flex p-b-20rpx">
      <view class="w-160rpx h-100% flex">
        <image class="w-160rpx h-160rpx" src="@/static/images/logo.png" />
      </view>
      <view class="ml-30rpx w-[calc(100%-160rpx)] flex flex-col">
        <view class="font-size-44rpx font-bold flex items-center">bsin-app-uni</view>
        <view class="font-size-26rpx opacity-60 flex-1 flex flex-col justify-center">{{ t('about') }}</view>
      </view>
    </view>
    <view class="flex items-center p-24rpx bg-bgCard rounded-20rpx shadow-md">
      <wd-button type="primary" @click="changeThemeColor">主题色切换</wd-button>
      <view class="ml-auto text-28rpx mr-16rpx">暗色主题切换</view>
      <wd-switch v-model="theme" active-value="light" inactive-value="dark" size="24px" />
    </view>
    <view class="shadow-md rounded-20rpx overflow-hidden box-border mt-40rpx">
      <wd-grid border :column="3" clickable>
        <wd-grid-item use-slot v-for="item in gridList" :key="item.iconName" @itemclick="handleItemClick(item)">
          <wd-icon :name="item.iconName" size="36px" :color="item.color"></wd-icon>
          <!-- <wd-icon name="layers" size="36px" :color="item.color"></wd-icon> -->
          <view class="font-size-28rpx font-bold">{{ item.title }}</view>
          <view class="color-#9e9e9e font-size-22rpx">{{ item.text }}</view>
        </wd-grid-item>
      </wd-grid>
    </view>
    <!-- 多语言 -->
    <view
      class="bg-bgCard rounded-20rpx overflow-hidden flex justify-between items-center w-[calc(100%-60rpx)] h-120rpx mt-40rpx p-x-30rpx shadow-sm"
      @click="setLocale"
    >
      <view class="flex items-center">
        <wd-icon name="setting" size="22px" color="#0163ff"></wd-icon>
        <view class="font-size-30rpx ml-30rpx">{{ t('nowLocaleText') }}</view>
      </view>
      <view class="flex items-center">
        <view class="font-size-28rpx color-#9e9e9e mr-5rpx h-22px line-height-22px">{{ t('nowLocale') }}</view>
        <wd-icon name="chevron-right" size="22px" color="#9e9e9e"></wd-icon>
      </view>
    </view>
    <!-- 分包页面 -->
    <view
      class="bg-bgCard rounded-20rpx overflow-hidden flex justify-between items-center w-[calc(100%-60rpx)] h-120rpx mt-24rpx p-x-30rpx shadow-sm"
      @click="goSubPage"
    >
      <view class="flex items-center">
        <wd-icon name="view-list" size="22px" :color="colors.warning"></wd-icon>
        <view class="font-size-30rpx ml-30rpx">分包页面</view>
      </view>
      <view class="flex items-center">
        <wd-icon name="chevron-right" size="22px" color="#9e9e9e"></wd-icon>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
/* ------------------------ 导入 与 引用 ----------------------------------- */
import { useTheme, useI18n } from '@/hooks';
const router = useRouter();
const { theme, setThemeColor, colors } = useTheme();
const { t, setLocale } = useI18n();

/* 宫格列表 */
const gridList = ref([
  {
    iconName: 'layers',
    title: t('layersTitle', 'text'),
    text: 'SFC',
    color: '#0163ff',
    name: 'my'
  },
  {
    iconName: 'attach',
    title: t('attachTitle', 'text'),
    text: t('attachText', 'text'),
    color: '#ffc400',
    url: '/pages/piniaDemo/index'
  },
  {
    iconName: 'link-unlink',
    title: t('linkUnlinkTitle', 'text'),
    text: t('linkUnlinkText', 'text'),
    color: '#ca145d',
    url: '/pages/queryDemo/queryTestDemo'
  },
  {
    iconName: 'link',
    title: t('linkTitle', 'text'),
    text: t('linkText', 'text'),
    color: '#11cde8',
    url: '/pages/queryDemo/useRequestDemo'
  },
  {
    iconName: 'lock-off',
    title: t('lockOffTitle', 'text'),
    text: t('lockOffText', 'text'),
    color: '#607d8b',
    name: 'authDemo'
  },
  {
    iconName: 'transfer',
    title: t('transferTitle', 'text'),
    text: t('transferText', 'text'),
    color: '#a61bc3',
    url: '/pages/wotUiDemo/index'
  },
  {
    iconName: 'view-module',
    title: t('viewModuleTitle', 'text'),
    text: 'z-padding',
    color: '#d4ed00',
    url: '/pages/queryDemo/zPagingDemo'
  },
  {
    iconName: 'bianjiliebiao',
    title: t('viewListTitle', 'text'),
    text: 'i18n',
    color: '#fea600',
    url: '/pages/i18nDemo/index'
  },
  {
    iconName: 'chart-bubble',
    title: 'Unocss',
    text: t('chartBubbleTitle', 'text'),
    color: '#ca145d',
    url: '/pages/unocssDemo/index'
  }
]);

/* ------------------------ 函数 与 方法 ----------------------------------- */

const goSubPage = () => {
  router.push({ name: 'myHome' });
};

const handleItemClick = (item: any) => {
  if (item.name) {
    router.push({ name: item.name });
  }
};

function getRandomColor() {
  // 生成随机的十六进制颜色值
  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  return randomColor;
}

const changeThemeColor = () => {
  setThemeColor(getRandomColor());
};
/* ------------------------- 生命周期 -------------------------------------- */
</script>
<style lang="scss"></style>
